<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id= "app">
			<!-- push()在最后一个追加
				pop() 删除最后一个
				shift() 删除第一个元素
				unshift() 在开头追加一个元素
				splice()  在指定位置替换元素
				sort()	数组排序，默认是按照字符编码的顺序
				reverse() 数组反转-->
				<!-- 展现数组 -->
				<span v-for ="item in array">{{item}} </span><br />
				<!-- 添加数据 -->
				数据:<input type = "text" v-model="num" />
				<button type="button" @click="push">push</button>
				<button @click="pop">pop</button>
				<button @click="shift">shift</button>
				<button @click="unshift">unshift</button>
				<button @click="splice">splice</button>
				<button @click="sort">sort</button>
				<button @click="resever">resever</button>
		</div>
		<script src="../js/vue.js">	
		</script>
		<script type="text/javascript">
			const app = new Vue({
				el:"#app",
				data:{
					// 定义数组
					array:[4,2,3,1,5],
					num:""
				},
				methods:{
					push(){
						this.array.push(this.num)
					},
					pop(){
						this.array.pop()
					},
					shift(){
						this.array.shift()
					},
					unshift(){
						this.array.unshift(this.num)
					},
					splice(){
						//参数说明：1.操作数据起始位置，2操作数量 3替换元素的值(不写就是删除)
						//将第一位的数据替换成5
						// this.array.splice(0,1,5)
						// 将前两位数换成8,9
						// this.array.splice(0,2,8,9)
						// 删除第3位元素
						this.array.splice(2,1,null)
					},
					sort(){
						this.array.sort()
					},
					resever(){
						this.array.reverse()
					}
				}
			})
		</script>
	</body>
</html>
